<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <script src="../layer_mobile/layer.js"></script>
</head>
<body class="padb-look bg_fe">
    <header><a class="icon_back"></a>云家故事</header>
    <div class="ord-detail" id="vue-box" v-cloak>
        <div class="ord-content">
            <div class="order-t"><span>订单详情</span></div>
            <div class="bor-c">
                <div class="title-text"><span>{{orderDetail.goodName}}</span><span class="status">{{orderDetail.state | status}}</span></div>
                <div class="data-list">
                    <div class="text-li"><span>{{orderDetail.snName}}</span><span class="fr">${{orderDetail.snPrice}}</span></div>
                    <div class="text-li" v-for="item in orderDetail.upgradeInfo"><span>{{item.title}}</span><span class="fr">${{item.price}}</span></div>
                </div>
                <div class="total-p"><span data-type="-1" class="js-startTK fl col-sty3" v-show="orderDetail.state==1?true:false">取消订单</span>总价<span class="price">￥{{orderDetail.totalPay}}</span></div>
            </div>
            <div>
                <div class="order-detail">
                    <span>订单编号：</span><span>{{orderDetail.code}}</span>
                </div>
                <div class="order-detail">
                    <span>创建时间：</span><span>{{orderDetail.createTime}}</span>
                </div>
                <div class="order-detail">
                    <span>付款时间：</span><span>{{orderDetail.payTime}}</span>
                </div>
            </div>
        </div>
        <div class="detail-c mt-0">
            <div class="li-detail li-1 fl">
                <img :src="imgBaseurl + orderDetail.storeImg" alt="">
            </div>
            <div class="li-detail li-2 fl">
                <div class="text-1">{{orderDetail.storeName}}</div>
                <div class="font-12">
                    <i class="dinwei-icon"></i>
                    <span class="color-gray">{{orderDetail.storeAddress}}</span>
                </div>
            </div>
            <div class="fr li-3 "><i class="li-detail fr phone-icon"></i></div>
        </div>
        <div class="like">
            <i class="marr-6 like-icon"></i>我还喜欢
        </div>
        <div class="data-love">
            <div class="li" v-for="items in storeList">
                <div class="over-h p-r go-storedetail" :storeId="items.id">
                    <div class="png-sty"><img :src="imgBaseurl + items.logoId" alt=""></div>
                    <div class="text-c">
                        <div class="marb-2"><span>{{items.name}}</span><i class="icon-lov love-icon"></i></div>
                        <div class="marb-2">
                            <i class="dinwei-icon"></i>
                            <span class="area-t color-97">{{items.address}}</span>
                        </div>
                        <div>
                            <span class="btn-status" v-for="item in items.label">{{item}}</span>
                        </div>
                    </div>
                </div>
                <div class="child-data">
                    <div class="item to_product" :productId="item.id"  v-for="item in items.productList">
                        <div class="marb-5">
                            <span class="money-sty red-act">￥{{item.nowPrice}}</span>
                            <span class="status-ms">
                            <i class="miaosha-icon"></i>&nbsp;秒杀
                        </span>
                            <span>{{item.name}}</span>
                        </div>
                        <div><span class="money-sty money-sty1">￥{{item.price}}</span><span>已售{{item.saleNum}}</span></div>
                    </div>
                </div>
                <div class="look-more" :storeId="items.id"><a>查看更多>></a></div>
            </div>
        </div>
        <div class="fotter-fix" v-show="orderDetail.state==1?true:false">
            <span class="status" :id="orderDetail.id" @click="goGetMoney">立即支付</span>
            <div class="to_agreement">
                <span><i></i>我已阅读并接受</span>
                <a href="agreement.html">服务协议</a>
            </div>
        </div>
        <!--<div class="fotter-fix" v-show="orderDetail.state==2?true:false">-->
            <!--<span class="status js-startTK" data-type="5">申请退款</span>-->
        <!--</div>-->
    </div>
    <!--退款模态框-->
    <div class="black-money-md hide">
        <div class="mask-tk"></div>
        <div class="content-tk">
            <div class="title-tk">理由</div>
            <textarea class="js-text-tk" name="" id="" cols="30" rows="10" placeholder="请填写理由"></textarea>
            <div><span class="js-blackMoney black-money">确认</span></div>
        </div>
    </div>
    <div id="pay">

    </div>
</body>
<script src="../js/config.js"></script>

<script>
    var app = new Vue({
        el:'#vue-box',
        data:{
            orderId:getUrlParam('orderId'),
            token:token,
            orderDetail:{},
            storeList:[],
            imgBaseurl: imgBaseurl,
        },
        mounted:function(){
            var _this = this;
            get_ajax("order/getOrderDetail", {orderId:_this.orderId,token:_this.token}, function (data) {
                console.log(data);
                data.orderDetail.upgradeInfo = JSON.parse(data.orderDetail.upgradeInfo);
                _this.orderDetail = data.orderDetail;
                getStoreList();
            });
        },
        methods:{
            goGetMoney:function (e) {
                get_ajax("order/payForOrderH5", {orderId:app.orderId,mobileType:"phone",payType:"26-1",token:app.token}, function (data) {
                    var data = data.params;
                    $("#pay").html(data)
                });
            }
        },
        filters: {
            status: function (value) {
                if(value==1){
                    return value = '待付款'
                }else if(value==-1){
                    return value = '取消'
                }else if(value==2){
                    return value = '待拍摄'
                }else if(value==3){
                    return value = '交易完成'
                }else if(value==4){
                    return value = '已评价'
                }else if(value==5){
                    return value = '退款中'
                }else if(value==6){
                    return value = '退款成功'
                }else if(value==7){
                    return value = '退款失败'
                }

            }
        }
    })
    //跳转页面
    $(document).on('click','.go-storedetail,.look-more', function () {
        var storeId = $(this).attr("storeId");
        window.location.href = 'store-detail.html?storeId='+storeId;
    })

    //取消-退款
    var _type = '';
    $(document).on('click','.js-startTK',function(){
        _type = $(this).attr('data-type');
        $('.black-money-md').removeClass('hide');
    })
    $(document).on('click','.mask-tk',function(){
        $('.black-money-md').addClass('hide');
    })

    $(document).on('click','.js-blackMoney',function(){
        if($('.js-text-tk').val()){
            get_ajax("order/updateOrder", {orderId:app.orderId,token:app.token,type:_type,reason:$('.js-text-tk').val()}, function (data) {


                var title = '';
                _type==-1?title = '取消成功':title = '退款成功';
                layer.open({
                    content: title
                    ,btn: '我知道了'
                    ,yes: function(index){
                        _type==-1?location.href = 'order.html?state=0':location.href = 'order.html?state=5';
                    }
                });


            });
        }else{
            layer.open({
                content: '理由不能为空'
                ,skin: 'msg'
                ,time: 1
            });

        }

    })
    function getStoreList() {
        var sendData = {
            lit: 31.26249,
            lat: 120.63212,
            city: '南京',
            keyword: '',
            classifyId: 0,
            brandId: 0,
            sort: 1,
            limit: 2,
            page: 1,
        }
        get_ajax("store/getStoreList", sendData, function (data) {
            var data = data.storeExlist;
            data.forEach(function (items) {
                items.label = items.label.split(",");
            });
            app.storeList = data;
            console.log(app.storeList);
        });
    }
</script>
</html>